<template>
  <div
    class="view-bizier-curve-arrow"
    @mousemove="onMousemove($event)"
    @mouseup="onMouseUp($event)"
  >
    <canvas
      ref="elCanvas"
      :width="detail.style.position.w"
      :height="detail.style.position.h"
    >Your browser does not support the HTML5 canvas tag.</canvas>

    <template v-if="editMode && selected">
      <template v-for="(pass,index) in points">
        <div
          :key="index"
          class="passby"
          :style="{
            left: pass.x - 5 + 'px',
            top: pass.y - 5 + 'px',
          }"
          @mousedown.stop="aroowPassDown(pass,$event,index)"
        />
      </template>
    </template>
  </div>
</template>

<script>
import canvasView from '../../ViewCanvas'

export default {
  name: 'ViewBizierCurveArrow',
  extends: canvasView,
  data() {
    return {
      lineWidth: 2,
      flag: false,
      passItem: {},
      points: [], // 控制点（包含起始和终点）
      FACTOR_H: 5, // 箭头 水平高度倍数
      FACTOR_V: 4 // 箭头 垂直长度倍数
    }
  },
  mounted() {
    let lineWidth = this.detail.style.lineWidth
    if (lineWidth === undefined) {
      lineWidth = 2
    } else if (typeof lineWidth === 'string') {
      lineWidth = parseInt(lineWidth)
    }
    this.points = this.detail.style.points
    // 增加2个中间节点，应该可以动态控制，这里暂时写死
    this.onResize()
  },
  methods: {
    drawLine(ctx) {
      const lineWidth = this.lineWidth
      const color = this.getForeColor()
      ctx.beginPath()
      ctx.moveTo(this.points[0].x, this.points[0].y)
      ctx.bezierCurveTo(
        this.points[1].x,
        this.points[1].y,
        this.points[2].x,
        this.points[2].y,
        this.points[3].x,
        this.points[3].y)
      ctx.lineWidth = lineWidth // 设置线宽状态
      ctx.strokeStyle = color // 设置线的颜色状态
      ctx.stroke() // 进行绘制
      ctx.closePath()
    },
    reDraw() {
      const w = this.detail.style.position.w
      const h = this.detail.style.position.h
      const el = this.$refs.elCanvas
      const ctx = el.getContext('2d')
      ctx.clearRect(0, 0, w, h)
      this.drawLine(ctx)
    },
    onResize() {
      this.reDraw()
    },
    aroowPassDown(pass, event, index) {
      this.flag = true
      pass.startX = event.pageX
      pass.startY = event.pageY
      pass.temp = {}
      pass.temp.x = pass.x
      pass.temp.y = pass.y
      this.passItem = pass
    },
    onMousemove(event) {
      if (!this.flag) { return }
      event.cancelBubble = true
      const dx = event.pageX - this.passItem.startX
      const dy = event.pageY - this.passItem.startY
      this.passItem.x = this.passItem.temp.x + dx
      this.passItem.y = this.passItem.temp.y + dy
      this.reDraw()
    },
    onMouseUp(event) {
      this.flag = false
    }
  }
}
</script>

<style lang="scss">
.view-bizier-curve-arrow {
  height: 100%;
  width: 100%;
  position: relative;

  .passby {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
    border: 1px solid rgb(34, 14, 223);
    cursor: move;
  }
}
</style>
